<!DOCTYPE html>
<!-- saved from url=(0045) -->
<html lang="en"
	class="app js no-touch no-android chrome no-firefox no-iemobile no-ie no-ie10 no-ie11 no-ios no-ios7 ipad">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Notebook | Web Application</title>
<meta name="description"
	content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="./layout-h_files/font.css" type="text/css">
<link rel="stylesheet" href="./layout-h_files/app.v1.css"
	type="text/css">
<!--[if lt IE 9]> <script src="js/ie/html5shiv.js"></script> <script src="js/ie/respond.min.js"></script> <script src="js/ie/excanvas.js"></script> <![endif]-->
</head>
<body class="" style="">
	<section class="hbox stretch">
		<!-- .aside -->
		<aside class="bg-dark aside-md" id="nav">
			<section class="vbox">
				<header class="header dker navbar navbar-fixed-top-xs">
					<div class="navbar-header">
						<a class="btn btn-link visible-xs"
							data-toggle="class:nav-off-screen,open" data-target="#nav,html">
							<i class="fa fa-bars"></i>
						</a> <a href="#" class="navbar-brand"
							data-toggle="fullscreen"> <img
							src="./layout-h_files/logo.png" class="m-r-sm"> <span
							class="hidden-nav-xs">Notebook</span>
						</a> <a class="btn btn-link visible-xs" data-toggle="dropdown"
							data-target=".nav-user"> <i class="fa fa-cog"></i>
						</a>
					</div>
				</header>
				<section class="w-f scrollable">
							<div class="slim-scroll" data-height="auto"
								data-disable-fade-out="true" data-distance="0" data-size="5px"
								data-color="#333333">
									<!-- nav -->
										<!-- nav -->
								<nav class="nav-primary hidden-xs">
									<ul class="nav">
										<li class="active"><a href="index.jsp" class="active">
												<i class="fa fa-dashboard icon"> <b class="bg-danger"></b>
											</i> <span class="pull-right"> <i
													class="fa fa-angle-down text"></i> <i
													class="fa fa-angle-up text-active"></i>
											</span> <span>Workset</span>
										</a>
											<ul class="nav lt">
												<li class="active"><a href="index.jsp" class="active">
														<i class="fa fa-angle-right"></i> <span>Dashboard
															v1</span>
												</a></li>
												<li><a href="dashboard.html"> <i
														class="fa fa-angle-right"></i> <span>Dashboard v2</span>
												</a></li>
											</ul></li>
										<li><a href="#layout"> <i
												class="fa fa-columns icon"> <b class="bg-warning"></b>
											</i> <span class="pull-right"> <i
													class="fa fa-angle-down text"></i> <i
													class="fa fa-angle-up text-active"></i>
											</span> <span>Layouts</span>
										</a>
											<ul class="nav lt">
												<li><a href="layout-c.html"> <i
														class="fa fa-angle-right"></i> <span>Color option</span>
												</a></li>
												<li><a href="layout-r.html"> <i
														class="fa fa-angle-right"></i> <span>Right nav</span>
												</a></li>
												<li><a href=""> <i
														class="fa fa-angle-right"></i> <span>Hbox Layout</span>
												</a></li>
												<li><a href="layout-boxed.html"> <i
														class="fa fa-angle-right"></i> <span>Boxed Layout</span>
												</a></li>
												<li><a href="layout-fluid.html"> <i
														class="fa fa-angle-right"></i> <span>Fluid Layout</span>
												</a></li>
											</ul></li>
										<li><a href="#uikit"> <i class="fa fa-flask icon">
													<b class="bg-success"></b>
											</i> <span class="pull-right"> <i
													class="fa fa-angle-down text"></i> <i
													class="fa fa-angle-up text-active"></i>
											</span> <span>UI kit</span>
										</a>
											<ul class="nav lt">
												<li><a href="buttons.html"> <i
														class="fa fa-angle-right"></i> <span>Buttons</span>
												</a></li>
												<li><a href="icons.html"> <b
														class="badge bg-info pull-right">369</b> <i
														class="fa fa-angle-right"></i> <span>Icons</span>
												</a></li>
												<li><a href="grid.html"> <i
														class="fa fa-angle-right"></i> <span>Grid</span>
												</a></li>
												<li><a href="widgets.html"> <b
														class="badge pull-right">8</b> <i
														class="fa fa-angle-right"></i> <span>Widgets</span>
												</a></li>
												<li><a href="components.html"> <i
														class="fa fa-angle-right"></i> <span>Components</span>
												</a></li>
												<li><a href="list.html"> <i
														class="fa fa-angle-right"></i> <span>List group</span>
												</a></li>
												<li><a href="#table"> <i
														class="fa fa-angle-down text"></i> <i
														class="fa fa-angle-up text-active"></i> <span>Table</span>
												</a>
													<ul class="nav bg">
														<li><a href="table-static.html"> <i
																class="fa fa-angle-right"></i> <span>Table static</span>
														</a></li>
														<li><a href="table-datatable.html"> <i
																class="fa fa-angle-right"></i> <span>Datatable</span>
														</a></li>
														<li><a href="table-datagrid.html"> <i
																class="fa fa-angle-right"></i> <span>Datagrid</span>
														</a></li>
													</ul></li>
												<li><a href="#form"> <i
														class="fa fa-angle-down text"></i> <i
														class="fa fa-angle-up text-active"></i> <span>Form</span>
												</a>
													<ul class="nav bg">
														<li><a href="form-elements.html"> <i
																class="fa fa-angle-right"></i> <span>Form
																	elements</span>
														</a></li>
														<li><a href="form-validation.html"> <i
																class="fa fa-angle-right"></i> <span>Form
																	validation</span>
														</a></li>
														<li><a href="form-wizard.html"> <i
																class="fa fa-angle-right"></i> <span>Form wizard</span>
														</a></li>
													</ul></li>
												<li><a href="chart.html"> <i
														class="fa fa-angle-right"></i> <span>Chart</span>
												</a></li>
												<li><a href="fullcalendar.html"> <i
														class="fa fa-angle-right"></i> <span>Fullcalendar</span>
												</a></li>
												<li><a href="portlet.html"> <i
														class="fa fa-angle-right"></i> <span>Portlet</span>
												</a></li>
												<li><a href="timeline.html"> <i
														class="fa fa-angle-right"></i> <span>Timeline</span>
												</a></li>
											</ul></li>
										<li><a href="#pages"> <i
												class="fa fa-file-text icon"> <b class="bg-primary"></b>
											</i> <span class="pull-right"> <i
													class="fa fa-angle-down text"></i> <i
													class="fa fa-angle-up text-active"></i>
											</span> <span>Pages</span>
										</a>
											<ul class="nav lt">
												<li><a href="gallery.html"> <i
														class="fa fa-angle-right"></i> <span>Gallery</span>
												</a></li>
												<li><a href="profile.html"> <i
														class="fa fa-angle-right"></i> <span>Profile</span>
												</a></li>
												<li><a href="invoice.html"> <i
														class="fa fa-angle-right"></i> <span>Invoice</span>
												</a></li>
												<li><a href="intro.html"> <i
														class="fa fa-angle-right"></i> <span>Intro</span>
												</a></li>
												<li><a href="master.html"> <i
														class="fa fa-angle-right"></i> <span>Master</span>
												</a></li>
												<li><a href="gmap.html"> <i
														class="fa fa-angle-right"></i> <span>Google Map</span>
												</a></li>
												<li><a href="jvectormap.html"> <i
														class="fa fa-angle-right"></i> <span>Vector Map</span>
												</a></li>
												<li><a href="login.jsp"> <i
														class="fa fa-angle-right"></i> <span>Signin</span>
												</a></li>
												<li><a href="signup.html"> <i
														class="fa fa-angle-right"></i> <span>Signup</span>
												</a></li>
												<li><a href="404.html"> <i
														class="fa fa-angle-right"></i> <span>404</span>
												</a></li>
											</ul></li>
										<li><a href="mail.html"> <b
												class="badge bg-danger pull-right">3</b> <i
												class="fa fa-envelope-o icon"> <b
													class="bg-primary dker"></b>
											</i> <span>Message</span>
										</a></li>
										<li><a href="notebook.html"> <i
												class="fa fa-pencil icon"> <b class="bg-info"></b>
											</i> <span>Notes</span>
										</a></li>
									</ul>
								</nav>
									<!-- / nav -->
								</div>
						</section>
				<footer class="footer lt hidden-xs b-t b-dark">
					<div id="chat" class="dropup">
						<section class="dropdown-menu on aside-md m-l-n">
							<section class="panel bg-white">
								<header class="panel-heading b-b b-light">Active chats</header>
								<div class="panel-body animated fadeInRight">
									<p class="text-sm">No active chats.</p>
									<p>
										<a href="#" class="btn btn-sm btn-default">Start
											a chat</a>
									</p>
								</div>
							</section>
						</section>
					</div>
					<div id="invite" class="dropup">
						<section class="dropdown-menu on aside-md m-l-n">
							<section class="panel bg-white">
								<header class="panel-heading b-b b-light">
									John <i class="fa fa-circle text-success"></i>
								</header>
								<div class="panel-body animated fadeInRight">
									<p class="text-sm">No contacts in your lists.</p>
									<p>
										<a href="#" class="btn btn-sm btn-facebook"><i
											class="fa fa-fw fa-facebook"></i> Invite from Facebook</a>
									</p>
								</div>
							</section>
						</section>
					</div>
					<a href="#nav" data-toggle="class:nav-xs"
						class="pull-right btn btn-sm btn-dark btn-icon"> <i
						class="fa fa-angle-left text"></i> <i
						class="fa fa-angle-right text-active"></i>
					</a>
					<div class="btn-group hidden-nav-xs">
						<button type="button" title="Chats"
							class="btn btn-icon btn-sm btn-dark" data-toggle="dropdown"
							data-target="#chat">
							<i class="fa fa-comment-o"></i>
						</button>
						<button type="button" title="Contacts"
							class="btn btn-icon btn-sm btn-dark" data-toggle="dropdown"
							data-target="#invite">
							<i class="fa fa-facebook"></i>
						</button>
					</div>
				</footer>
			</section>
		</aside>
		<!-- /.aside -->
		<section id="content">
			<section class="vbox">
				<section>
					<section class="hbox stretch">
						<section>
							<section class="vbox">
								<header class="header bg-white b-b b-light">
									<p>Layout start with a hbox</p>
								</header>
								<section class="scrollable wrapper">
									<p class="h4">Contents...</p>
								</section>
								<footer class="footer bg-white b-t b-light">
									<p>This is a footer</p>
								</footer>
							</section>
						</section>
						<aside class="bg-light lter b-l aside-md"></aside>
					</section>
				</section>
			</section>
			<a href="#" class="hide nav-off-screen-block"
				data-toggle="class:nav-off-screen,open" data-target="#nav.html"></a>
		</section>
	</section>
	<!-- Bootstrap -->
	<!-- App -->
	<script src="./layout-h_files/app.v1.js"></script>
	<script src="./layout-h_files/app.plugin.js"></script>
</body>
</html>